<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>订单支付</title>
    <link rel="stylesheet" href="https://cdn.bootcss.com/weui/1.1.3/style/weui.min.css">
    <link rel="stylesheet" href="https://cdn.bootcss.com/jquery-weui/1.2.1/css/jquery-weui.min.css">
    <link rel="stylesheet" href="/css/wechat/pay.css">
</head>
<body>
<div class="ontouchstart">
    <div class="bd">
        <div class="page__bd">
            <div class="weui-cells">
                <div class="weui-cell">
                    <div class="weui-cell__bd">
                        <label class="weui-label">车牌：</label>
                    </div>
                    <div class="weui-cell__ft" th:text="${carNo}"></div>
                </div>
                <div class="weui-cell">
                    <div class="weui-cell__bd">
                        <label class="weui-label">
                            小区名称：
                        </label>
                    </div>
                    <div class="weui-cell__ft" th:text="${communityInfo}"></div>
                </div>
                <div class="weui-cell">
                    <div class="weui-cell__bd">
                        <label class="weui-label">
                            开始时间：
                        </label>
                    </div>
                    <div class="weui-cell__ft" th:text="${startTime}"></div>
                </div>
                <div class="weui-cell">
                    <div class="weui-cell__bd">
                        <label class="weui-label">
                            结束时间：
                        </label>
                    </div>
                    <div class="weui-cell__ft" th:text="${entTime}"></div>
                </div>
                <div class="weui-cell">
                    <div class="weui-cell__bd">
                        <label class="weui-label">
                            停车总时长：
                        </label>
                    </div>
                    <div class="weui-cell__ft" th:text="${times} + '小时'"></div>
                </div>
                <div class="weui-cell">
                    <div class="weui-cell__bd">
                        <label class="weui-label">
                            总计费：
                        </label>
                    </div>
                    <div class="weui-cell__ft" th:text="'￥' + ${totalFee} + '元'">5</div>
                </div>
                <div class="weui-cell">
                    <div class="weui-cell__bd">
                        <label class="weui-label">
                            支付方式：
                        </label>
                    </div>
                    <div class="weui-cell__ft">
                        <img th:src="@{/img/wechat/wechat-pay.png}" alt="">
                        微信支付
                    </div>
                </div>
            </div>
        </div>
    </div>
    <button class="form-btn" onclick="placeOrder()">立即支付</button>

    <input type="hidden" id="exitId" name="exitId" th:value="${exitId}">
    <input type="hidden" id="carNo" name="carNo" th:value="${carNo}">
</div>
<script src="http://g.tbcdn.cn/mtb/lib-flexible/0.3.2/??flexible_css.js,flexible.js"></script>
<script src="https://cdn.bootcss.com/jquery/1.11.0/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/jquery-weui/1.2.1/js/jquery-weui.min.js"></script>
<script src="https://cdn.bootcss.com/jquery-weui/1.2.1/js/swiper.min.js"></script>
<script src="https://cdn.bootcss.com/jquery-weui/1.2.1/js/city-picker.min.js"></script>
<script>
    //下单
    function placeOrder() {
        var carNo = $("#carNo").val();
        var exitId = $("#exitId").val();

        $.ajax({
            type: 'POST',
            data: {
                "carNo": carNo,
                "exitId": exitId
            },
            url: "/mobile/orderIndex/provisionalOrder",
            success: function (json) {
                if (json.code == 0) {
                    pay(json.data.appId, json.data.timeStamp, json.data.signType, json.data.nonceStr, json.data.package, json.data.sign)
                } else {
                    $.toast(json.msg, 'cancel')
                }
            }
        });
    }

    function pay(appId, timeStamp, signType, nonceStr, packages, paySign) {

        if (typeof WeixinJSBridge == "undefined") {
            if (document.addEventListener) {
                document.addEventListener('WeixinJSBridgeReady', onBridgeReady, false);
            } else if (document.attachEvent) {
                document.attachEvent('WeixinJSBridgeReady', onBridgeReady);
                document.attachEvent('onWeixinJSBridgeReady', onBridgeReady);
            }
        } else {
            onBridgeReady(appId, timeStamp, signType, nonceStr, packages, paySign);
        }

    }

    //h5唤起微信支付
    function onBridgeReady(appId, timeStamp, signType, nonceStr, packages, paySign) {
        WeixinJSBridge.invoke(
                'getBrandWCPayRequest', {
                    "appId": appId,
                    "timeStamp": timeStamp,
                    "nonceStr": nonceStr,
                    "package": packages,
                    "signType": signType,
                    "paySign": paySign
                },
                function (res) {
                    if (res.err_msg == "get_brand_wcpay_request:ok") {
                        $.toast("支付成功");
                        window.location.href = "/mobile/provisionalCarSuccess";
                    } else if (res.err_msg === 'get_brand_wcpay_request:cancel') {
                        $.toast("取消支付", "cancel");
                    } else {
                        alert(res.err_msg);
                    }
                }
        );
    }
</script>
</body>
</html>
